<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-29 18:56:31
-->
<template>
  <div>
    <div class="header">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">销售量</el-menu-item>
        <el-menu-item index="2">访问量</el-menu-item>
      </el-menu>

      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <el-radio-button :label="1">今日</el-radio-button>
        <el-radio-button :label="2">本周</el-radio-button>
        <el-radio-button :label="3">本月</el-radio-button>
        <el-radio-button :label="4">本年</el-radio-button>
      </el-radio-group>
    </div>

    <div class="main">
      <el-row :gutter="20">
        <el-col :span="9" :offset="0">
          <div class="main_left">
            <MiddleLeft :activeIndex="activeIndex"></MiddleLeft>
          </div>
        </el-col>
        <el-col :span="7" :offset="8">
          <div class="main_right">
            <MiddleRight :activeIndex="activeIndex"></MiddleRight>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import MiddleLeft from './components/MiddleLeft/index.vue'
import MiddleRight from './components/MiddleRight/index.vue'

const activeIndex = ref('1')
const isCollapse = ref(1)
const handleSelect = (e: any) => {
  activeIndex.value = e
}
</script>

<script lang="ts">
export default {
  name: 'MiddleView',
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #aaa;
  height: 40px;
}
.el-menu-demo {
  flex: 1;
  height: 40px;
  background-color: transparent;
  border-bottom: none;
}
.el-menu--horizontal > .el-menu-item {
  color: #fff;
}
.el-menu-item:not(.is-disabled):hover {
  color: #fff;
  background-color: transparent;
}
.el-menu--horizontal > .el-menu-item.is-active {
  background-color: #00000041;
  color: aqua !important;
  border-bottom-color: #00ffff;
}
:deep(.el-radio-button__inner) {
  background-color: transparent;
  border: 1px solid #aaa;
  color: #fff;
}
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background-color: transparent;
  border-color: #aaa;
  color: aqua;
}
</style>
